<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    align="left"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    width="800px">
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" v-if="detail.id>0">
      <el-form-item label="状态" align="left" prop="status">
        <el-select v-model="form.isAgree" placeholder="状态">
          <el-option
            v-for="(item,index) in isAgreeArr"
            :key="index"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="取消原因" align="left" prop="reason" v-if="form.isAgree===0">
        <el-input v-model="form.reason" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="收货地址" align="left" prop="addressId" v-if="form.isAgree===1 && detail.type.id!==2">
        <el-select v-model="form.addressId" style="width: 600px">
          <el-option v-for="(address,index) in addressList" :key="index" :value="address.id" :label="address.name+','+address.mobile+'('+address.addressDetail+')'"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'OrderApplyHandlerDialog',
  props:{
    successFunction:Function
  },
  data: function () {
    return {
      info:'退换货-处理',
      dialogVisible: false,
      currLoading: false,
      addressList:[],
      isAgreeArr:[
        {id:1,name:'同意请求'},
        {id:0,name:'拒绝请求'}
      ],
      detail:{},
      form: {
        id:0,
        isAgree: 1,
        reason:'',
        addressId:0
      },
      rules: {
        reason: [
          {required: false, message: '请输入 名称', trigger: ['blur', 'change']},
          {min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: ['blur', 'change']}
        ]
      }
    }
  },
  mounted () {
  },
  methods: {
    open: function (detail) {
      this.detail=detail
      this.form.id=detail.id
      this.getAddress()
    },
    submit: function () {
      let $this = this
      if ($this.form.type===0 && (!$this.form.reason || $this.form.reason.length<5)){
        return this.$message.error("拒绝理由 不能为空")
      }
      $this.$refs.form.validate((valid) => {
        if (valid) {
          var form = {
            id:$this.form.id,
            isAgree:$this.form.isAgree,
            reason:$this.form.reason,
            addressId:$this.form.addressId,
          }
          $this.currLoading = true
          $this.MyRequest(this.ApiDoNameShop + 'OrderApply/handlerApply', form, function () {
            $this.$message.success('操作成功')
            $this.currLoading = false
            $this.dialogVisible=false
            $this.$props.successFunction()
            $this.$forceUpdate()
          }, function () {
            $this.$message.success('操作失败，请重试')
            $this.currLoading = false
            $this.$forceUpdate()
          })
        } else {
          return false
        }
      })
    },
    getAddress:function () {
      let $this=this
      $this.MyRequest(this.ApiDoNameShop + 'ShopAddress/getList', {}, function (data) {
        $this.addressList=data
        if ($this.addressList.length>0){
          $this.form.addressId=$this.addressList[0].id
        }
        $this.dialogVisible=true
        $this.$forceUpdate()
      }, function () {
        $this.$message.success('操作失败，请重试')
        $this.currLoading = false
        $this.$forceUpdate()
      })
    }
  },

}
</script>

<style scoped>

</style>
